<template>
<div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in OBJLIST">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.num}}</td>
            </tr>
        </tbody>
    </table>
    <span>总数为:</span><span v-text="sum"></span>
    <span>总数为:</span><span v-text="sum"></span>
    <span>总数为:</span><span v-text="sum"></span>
    <hr/>
    <span>总数为:</span><span v-text="func()"></span>
    <span>总数为:</span><span v-text="func()"></span>
    <span>总数为:</span><span v-text="func()"></span>

</div>
</template>

<script setup>
    import { computed,ref } from 'vue';
    let OBJLIST=ref([
        {id:1,name:'艾尔登法环',num:6},
        {id:2,name:'巫师三',num:3},
        {id:3,name:'艾尔登法环',num:5},
    ]);
    let sum=computed(()=>{
        console.log("computed");
        return OBJLIST.value.reduce((prev,item)=>prev+item.num,0);
    })
    let func=()=>
    {
        console.log("func")
        return OBJLIST.value.reduce((prev,item)=>prev+item.num,0);
    }
</script>

<style scoped>  
    table{
        border: 2px solid grey;

    }
    th,td{
        width: 80px;
        height: 30px;
        border: 2px solid grey;
        text-align: center;
    }

</style>